<template>
    <div class="container">
        <!-- 登录表单-->
        <el-form
            ref="input_data"
            :model="input_data"
            :rules="rules"
            class="form"
        >
            <el-form-item>
                <h1>LOGIN</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input v-model="input_data.username" auto-complete="off" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="input_data.password" placeholder="密码" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login('input_data')">确认</el-button>
                <el-button @click="resetForm('input_data')">重置</el-button>
            </el-form-item>
            <el-form-item>
                <router-link :to="{path:'/register'}" class="router-link">还没有帐号点击注册</router-link>
                <router-link :to="{path:'/register'}">忘记密码</router-link>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'login',
    data() {
        return {
            input_data: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 5, message: '至少5位', trigger: 'blur' }]
            }
        };
    },
    methods: {
        //登录函数
        login(formData) {
            this.$refs[formData].validate(valid => {
                if (valid) {
                    //消息提示登录成功
                    this.$message({ message: '登录成功', type: 'success' });
                    this.$router.push('/index');
                    /*                    post(api.login, {
                                            username: this.input_data.username,
                                            password: md5(this.input_data.password)
                                        })
                                            .then(res => {
                                                console.log(res);
                                                if (res.data.success) {
                                                    //消息提示登录成功
                                                    this.$message({ message: '登录成功', type: 'success' });
                                                    this.$router.push('/index');
                                                } else {
                                                    this.$message.error('帐号或密码错误');
                                                }
                                            })
                                            .catch(err => {
                                                console.log(err.data);
                                                this.$message.error('帐号或密码错误');
                                            });*/

                } else {
                    this.$message.error('帐号或密码错误');
                    return false;
                }
            });
        },
        //重置输入框
        resetForm(formData) {
            this.$refs[formData].resetFields();
        }
    }
};
</script>
<style lang="less" scoped src="../assets/less/login.less">
</style>
